@import "include/reset.less";
@import "include/layout.less";

body{
	background: #f5f5f5; 
	// background: url(../images/bg.jpg);
	font-family: "Microsoft Yahei";
	font-size: 14px;
}
.wrapper{
	width: 1200px;
	margin: 0 auto;
	position: relative;
}


#header{
	width: 100%;
	height: 75px;
	margin: 0 auto;

	.logo{
		width: 200px;
		height: 75px;
		position: absolute;
		left: 41%;
		.transition(0.8s);
		text-indent: -999em;
		background: url(../images/logo.png);
	}

	.player{
		float: right;
		width: auto;
		height: 70px;
		margin-top: 10px;
		.text-autocut();
		display: none;
		position: relative;

		img{
			float: left;
			width: 60px;
			height: 60px;
			margin: 5px 10px 0 10px;
			border: solid 1px #FFF;
			box-shadow: 0 0 8px #39c;
		}
		span{
			float: left;
			height: 30px;
			max-width: 130px;
			min-width: 40px;
			text-align: center;
			.text-autocut();
			display: inline-block;
			line-height: 30px;
			color: #999;
		}
		.exit{
			position: absolute;
			top: 40px;
			right: 0px;
			display: block;
			width: 30px;
			height: 30px;
			cursor: pointer;
			background-position: -328px -200px;
		}
	}
}

#container{
	width: 100%;
	height: auto;
	position: relative;
	padding-top: 4px;
	overflow: hidden;
	display: none;

	#main{
		float: left;
		width: 880px;
		height: 660px;
		overflow: hidden;
	}

	#chat{
		float: left;
		width: 296px;
		height: 660px;
		margin-left: 20px;
		position: relative;
	}

	#online{
		position: absolute;
		top: 4px;
		right: -210px;
		// right: 4px;
		opacity: 0;
		z-index: 23;
		width: 200px;
		height: 616px;
		margin-left: 20px;
		background: #FFF;
		.box-shadow(0, 0, 10px, 0.4);
	}
}



#content{
	width: 100%;
	overflow: hidden;
	background: #e7e7e7;
	
	.content_inner{
		border: solid 1px #ccc;
		margin: 3px;
		background: #fff;
		overflow: hidden;
	}
}
.draw_tool{
	opacity: 0;
}
.content_tip{
	width: 100%;
	height: 40px;
	position: relative;
	z-index: 999;
	// opacity: 0;

	.li_tip{
		float: left;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #333;
		text-indent: 40px;
	}
	.game_tip{
		width: 400px;
		color: #39c;
		background-position: -400px -118px;
	}
	.turn_game_tip{
		display: none;
	}
	.game_tip_title{
		color: #666;
	}
	.game_title{
		font-size: 16px;
		text-indent: 30px;
		font-weight: bold;
		background-position: -400px -158px;
	}
	.game_time{
		float: right;
		font-size: 21px;
		margin-right: 15px;
		border-radius: 50%;
		text-decoration: underline;
		color: #39c;
		background-position: -400px -194px;
	}
}


// 房间
#content{
	#canvas, #canvas_bak{
		display: none;
	}
	.canvas_container{
		// background: #FFF;
	}

}
.score_wrapper{
	// display: none;
	position: relative;
	z-index: 999;
}

.room_wrapper{
	width: 600px;
	height: auto;
	margin: 0 auto;
	padding-top: 100px;
	display: none;
	z-index: 999;
	position: relative;

	.room_info{
		width: 100%;
		height: 60px;
		background: rgba(238, 238, 238, 0.8);
		border-bottom: solid 1px #F1F1F1;

		.room_title{
			float: left;
			width: 300px;
			text-align: right;
			font-weight: bold;
			font-size: 18px;
			color: #333;
			line-height: 60px;
		}
		.room_time_add{
			float: right;
			width: 80px;
			height: 24px;
			background: #f8b62d;
			text-align: center;
			margin: 20px 10px 0 0;
			cursor: pointer;
			color: #FFF;
		}
		.room_game_start{
			float: right;
			width: 80px;
			height: 24px;
			background: #6e8a14;
			color: #FFF;
			margin: 20px 10px 0 0;
			text-align: center;
			cursor: pointer;
			.transition(1s);
		}
		.room_time{
			float: right;
			width: 60px;
			height: 60px;
			background: #eb063e;
			border-radius: 50%;

			span{
				width: 52px;
				height: 52px;
				margin: 1px 0 0 1px;
				border-radius: 50%;
				background: #eb063e;
				border: solid 3px #FFF;
				display: inline-block;
				color: #FFF;
				font-size: 30px;
				line-height: 52px;
				text-align: center;
			}
		}
	}

	.room_inner{
		background: rgba(238, 238, 238, 0.5);
		padding-top: 20px;
		
		li{
			float: left;
			width: 120px;
			height: 120px;
			margin: 0px 15px 20px 15px;

			img{
				margin: 0 auto;
				display: block;
				box-shadow: 0 0 10px #39c;
			}
			span{
				width: 100%;
				text-align: center;
				display: inline-block;
			}
		}
	}
}



// 结果展示
.result{
	width: 400px;
	height: 270px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	top: 100px;
	z-index: 9999;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);

	.result_header{
		width: 100%;
		height: 210px;
		background: rgba(255, 255, 255, 0.8);

		.correct_count{
			float: left;
			width: 160px;
			height: 24px;
			display: inline-block;
			color: #666;
			margin-top: 8px;
			margin-left: 8px;
			span{
				color: red;
			}
		}
		.result_time_to_close{
			float: right;
			width: 80px;
			height: 24px;
			font-size: 12px;
			margin-top: 8px;
			color: #666;
		}
		.correct_answer{
			float: left;
			width: 100%;
			text-align: center;
			font-size: 14px;
			color: #666;
			margin: 40px auto;

			span{
				font-size: 18px;
				color: red;
			}
		}
		.result_tool{
			width: 200px;
			margin: 0 auto;
			text-align: center;

			li{
				float: left;
				width: 40px;
				height: 40px;
				margin: 0 10px;
				border-radius: 50%;
				cursor: pointer;
				box-shadow: 0 0 4px #39c;
			}
			.result_egg{
				background-position: -320px -342px;
			}
			.result_flower{
				background-position: -322px -234px;
			}
			.result_shoe{
				background-position: -318px -285px;
			}
		}
	}

	.result_footer{
		width: 100%;
		height: 60px;
		overflow: hidden;
		background: #ddd;

		.download_result_img{
			width: 80px;
			height: 30px;
			background: #83aa07;
			text-align: center;
			color: #FFF;
			border-radius: 4px;
			margin: 15px auto;
			line-height: 30px;
			cursor: pointer;
		}
	}
}




// 聊天
.section_title{
	width: 100%;
	height: 24px;
	font-size: 16px;
	color: #666;
	text-indent: 25px;
	margin-bottom: 10px;
}
.canvas_title{
	text-indent: 45px;
	background-position: -405px -6px; 
}
.chat_title{
	background-position: -410px -47px;
}
.online_title{
	position: absolute;
	margin-bottom: 0px;
	text-indent: 45px;
	background-position: -400px -90px;
}
.icon{
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
}


.clear_chat{
	width: 24px;
	height: 24px;
	position: absolute;
	top: 5px;
	right: 0px;
	cursor: pointer;
	background-position: -405px -377px;
}
.chat_content_wrap{
	height: 560px;
	overflow-y: hidden;
	background: #FFF;
	border-radius: 6px;
	border: solid 1px #ccc;
	box-shadow: 0 0 6px #ccc;
	padding: 10px;
	position: relative;

	.chat_content_inner{
		position: absolute;
		// padding-right: 10px;
		width: 94%;
		// padding-top: 10px;
	}
	.chat_message{
		width: 100%;
		margin: 0 auto 14px 0;

		img{
			float: left;
			width: 28px;
			height: 28px;
			border: solid 1px #ddd;
			border-radius: 4px;
			margin-right: 10px;
			margin-top: 16px;
		}
		.info{
			font-size: 12px;
			color: #999;
			.author{
				float: left;
			}
			.time{
				float: right;
			}
		}
		.message{
			float: left;
			position: relative;
			width: ~"-moz-calc(100% - 50px)";
		    width: ~"-webkit-calc(100% - 50px)";
		    width: ~"-o-calc(100% - 50px)";
		    width: ~"calc(100% - 50px)";
			padding: 4px;
			border: solid 1px #ccc;
			border-radius: 4px;
			line-height: 20px;
			background: #f8f8f8;
			.wrap();

			&::before{
				content: "";
				position: absolute;
				top: 10px;
				left: -9px;
				.trangle(4px, #fff, #ccc, #fff, #fff); 
			}
		}
	}

	.type_me, .type_private{
		width: 100%;

		img{
			float: right;
			border: solid 1px #00b6fa;
			margin-left: 10px;
			margin-right: 0px;
		}
		.message{
			float: left;
			border: solid 1px #00b6fa;
			background: #f7f7f7;

			&::before{
				opacity: 0;
			}
			&::after{
				content: "";
				position: absolute;
				top: 10px;
				right: -9px;
				.trangle(4px, #fff, #fff, #fff, #00b6fa); 
			}
		}
	}

	.notice{
		line-height: 24px;
		color: #333;
		margin: 0;

		i{
			float: left;
			width: 24px;
			height: 24px;
			display: inline-block;
		}
		p{
			line-height: 30px;
			display: inline;
		}
	}
	.type_right i{
		background-position: -410px -260px;
	}
	.type_sub i{
		background-position: -410px -320px;
	}
	.type_focus i{
		background-position: -410px -352px;
	}
	.type_add i{
		background-position: -410px -290px;
	}
}

.chat_input{
	width: 100%;

	.message_input{
		width: 196px;
		height: 22px;
		margin-top: 10px;
		padding: 4px;
		background: #FFF;
		color: #333;
		outline: none;
		border: solid 1px #798DE0;
		// box-shadow: 0 0 4px #959DFA;
		font-family: "Microsoft Yahei";
	}
	.chat_btn{
		width: 60px;
		height: 32px;
		border: solid 1px #FFF;
		border-radius: 2px;
		color: #FFF;
		outline: none;
		cursor: pointer;
		box-shadow: 0 0 4px #008000;
		.gradient(top, #93F11F, #6fb200);
		.transition(0.2s);

		&:hover{
			box-shadow: 0 0 4px blue;
			.gradient(top, #7ACF10, #6fb200);
		}
		&:focus{
			.gradient(top, #93F11F, #6fb200);
		}
		&:active{
			.gradient(top, #7EB638, #6fb200);
		}
	}
	.show_online{
		float: right;
		width: 20px;
		height: 30px;
		margin-top: 14px;
		cursor: pointer;
		background-position: -410px -237px;
		.transition(0.4s);
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transform-origin: 9.5px 12.5px;
	}
	.close_online{
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-o-transform: rotate(135deg);
		transform: rotate(135deg);
	}
}

@-webkit-keyframes colors {
	0% {box-shadow: 0 0 4px #39f;}
	15% {box-shadow: 0 0 4px #F246C9;}
	30% {box-shadow: 0 0 4px #4453F2;}
	45% {box-shadow: 0 0 4px #44F262;}
	60% {box-shadow: 0 0 4px #F257D4;}
	75% {box-shadow: 0 0 4px #EDF255;}
	90% {box-shadow: 0 0 4px #F20006;}
	100% {box-shadow: 0 0 4px #39f;}
}
.message_input, .dot_color{
	-webkit-animation-direction: normal;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: colors;
	-webkit-animation-timing-function: ease;
}


.online_list{
	max-height: 480px;
	padding: 10px 10px 10px 5px;
	margin-top: 24px;
	overflow-y: scroll;

	.online_member{
		float: left;
		width: 100%;
		height: 80px;
		position: relative;
		margin: 5px;
		cursor: pointer;

		&::before{
			content: "";
			height: 1px;
			width: 100%;
			position: absolute;
			top: -5px;
			background: #ccc;
		}
		&::after{
			content: "";
			height: 1px;
			width: 100%;
			position: absolute;
			top: -4px;
			left: 0px;
			background: rgba(0, 0, 0, 0.1);
		}

		.avator{
			float: left;
			width: 78px;
			height: 78px;
			border-radius: 6px;
			border: solid 1px #ccc;
			img{
				width: 78px;
				height: 78px;
				border-radius: 6px;
			}
		}
		.nickname{
	
		}
		.score{
			
		}
		.info{
			float: left;
			width: 90px;
			margin-left: 8px;
			line-height: 40px;
		}
	}
}



#footer{
	width: 100%;
	height: 24px;
	line-height: 24px;
	text-align: center;
}



.scroller-container {
    position: absolute;
    top: 40px;
    right: 2px;
    width: 6px;
    height: 418px;
    display: none;
}

.scrollbar {
    width: 6px;
    top: 0;
    left: 1px;
    background: #090A0B;
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement {
    display: none;
}
::-webkit-scrollbar-button:end:increment {
    background-color: #FFF;
}
::-webkit-scrollbar-button:start:decrement {
    background-color: #FFF;
}
::-webkit-scrollbar-track-piece:start {
    background-color: #FFF;
}
::-webkit-scrollbar-track-piece:end {
    background-color: #FFF;
}
::-webkit-scrollbar-thumb {
	width: 6px;
	margin: 0 auto;
	border-radius: 4px;
    background: #090A0B;
    border-width: 8 0 8 0;
}